<template>
  <div class="container">
    <!-- 左侧区域 -->
    <div class="left">
      <!-- 左上 -->
      <div class="leftTop">
        <!-- 头部区域 -->
        <div class="leftTopHeader">数据资产编目</div>
        <!-- 数据展示 -->
        <div class="leftShow">
          <div class="block">
            <div class="title">武器装备数量</div>
            <div class="count" style="color: #5e6fe7">800套</div>
          </div>
          <div class="block">
            <div class="title">情报数据量</div>
            <div class="count" style="color: #0997ff">600个</div>
          </div>
          <div class="block">
            <div class="title">侦察图像数量</div>
            <div class="count" style="color: #7cc09a">98个</div>
          </div>
          <div class="block">
            <div class="title">作战模拟数据次数</div>
            <div class="count" style="color: #ff9a0e">20次</div>
          </div>
        </div>
        <!-- 图表展示 -->
        <div class="leftTopChart">
          <div id="leftTop"></div>
        </div>
      </div>
      <!-- 左下 -->
      <div class="leftBottom">
        <!-- 左下标题 -->
        <div class="leftBottomTitle">热点数据汇总TOP5</div>
        <!-- 左下数据展示 -->
        <div class="leftBottomShow">
          <!-- 数据标题 -->
          <div class="showTitle">参战人员数量</div>
          <!-- 标签数量 -->
          <div class="tagCount">
            <el-tag type="success" size="mini" color="#D0EBE6">累计</el-tag>
            2000人
          </div>
        </div>
        <div class="leftBottomShow">
          <!-- 数据标题 -->
          <div class="showTitle">精准位置数据</div>
          <!-- 标签数量 -->
          <div class="tagCount">
            <el-tag type="success" size="mini" color="#D0EBE6">累计</el-tag>
            7211.5 条
          </div>
        </div>
        <div class="leftBottomShow">
          <!-- 数据标题 -->
          <div class="showTitle">兵力需求</div>
          <!-- 标签数量 -->
          <div class="tagCount">
            <el-tag type="success" size="mini" color="#D0EBE6">累计</el-tag>
            8000 人
          </div>
        </div>
        <div class="leftBottomShow">
          <!-- 数据标题 -->
          <div class="showTitle">武器装备需求</div>
          <!-- 标签数量 -->
          <div class="tagCount">
            <el-tag type="success" size="mini" color="#D0EBE6">累计</el-tag>
            8000 套
          </div>
        </div>
        <div class="leftBottomShow">
          <!-- 数据标题 -->
          <div class="showTitle">装备故障率</div>
          <!-- 标签数量 -->
          <div class="tagCount">
            <el-tag type="success" size="mini" color="#D0EBE6">累计</el-tag>
            12%
          </div>
        </div>
      </div>
    </div>
    <!-- 中间区域 -->
    <div class="center">
      <!-- 数据展示区 -->
      <div class="centerShow">
        <div class="centerShowBox">
          <!-- 标题 -->
          <div class="centerShowTitle">武器装备数量</div>
          <!-- 数量 -->
          <div class="centerShowCount">
            1666<span style="font-size: 12px; color: #bbc5d1">辆/套</span>
          </div>
        </div>
        <div class="centerShowBox">
          <!-- 标题 -->
          <div class="centerShowTitle">人员编制数量</div>
          <!-- 数量 -->
          <div class="centerShowCount">
            888 <span style="font-size: 12px; color: #bbc5d1">人</span>
          </div>
        </div>
        <div class="centerShowBox">
          <!-- 标题 -->
          <div class="centerShowTitle">后勤保障物资数量</div>
          <!-- 数量 -->
          <div class="centerShowCount">
            999 <span style="font-size: 12px; color: #bbc5d1">千克/吨</span>
          </div>
        </div>
      </div>
      <div style="padding: 20px; color: gray; font-size: 20px">
        已注册数据资源
      </div>
      <!-- 图表区域 -->
      <div class="centerChart">
        <div id="centerChart" style="width: 100%; height: 100%"></div>
      </div>
    </div>
    <!-- 右侧区域 -->
    <div class="right">
      <!-- 右上 -->
      <div class="rightTop">
        <!-- 头部区域 -->
        <div class="leftTopHeader">已发布数据资源</div>
        <!-- 数据展示 -->
        <div class="leftShow">
          <div class="block">
            <div class="title">传感器数据点数量</div>
            <div class="count" style="color: #5e6fe7">87个</div>
          </div>
          <div class="block">
            <div class="title">通信报文数量</div>
            <div class="count" style="color: #0997ff">107条</div>
          </div>
          <div class="block">
            <div class="title">地理信息数据图层数量</div>
            <div class="count" style="color: #7cc09a">41个</div>
          </div>
          <div class="block">
            <div class="title">目标识别记录数量</div>
            <div class="count" style="color: #ff9a0e">754个</div>
          </div>
        </div>
        <!-- 图表展示 -->
        <div class="rightTopChart">
          <div id="rightTop" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <!-- 右中 -->
      <div class="rightCenter">
        <!-- 头部区域 -->
        <div class="leftTopHeader">军事技能考核成绩</div>
        <div class="chartTitle">近七日平均考核成绩</div>
        <div
          id="rightCenterChart"
          style="width: 100%; height: 65%; margin-top: 30px"
        ></div>
      </div>
      <!-- 右下 -->
      <div class="rightBottom">
        <!-- 头部区域 -->
        <div class="leftTopHeader">热点共享</div>
        <!-- 左下数据展示 -->
        <div class="leftBottomShow">
          <!-- 数据标题 -->
          <!-- <div class="showTitle">“实战化训练新突破”</div> -->
          <!-- 标签数量 -->
          <div class="tagCount">
            <div>
              <el-tag type="success" size="mini" color="#D0EBE6">今日</el-tag>
              实战化训练新突破
            </div>
            <div>
              <el-tag type="primary" size="mini" color="#D0EBE6">昨日</el-tag>
              高科技装备亮相
            </div>
            <div>
              <el-tag type="warning" size="mini" color="#D0EBE6">热点</el-tag>
              抗洪救灾英雄谱
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Line } from "@antv/g2plot";
import { Pie } from "@antv/g2plot";
import { Column } from "@antv/g2plot";
export default {
  mounted() {
    this.createLeftChart();
    this.createCenterChart();
    this.createRightChart();
    this.createRightCenterChart();
  },
  methods: {
    // 左上折线图
    createLeftChart() {
      const data = [
        { year: "武器装备", value: 800 },
        { year: "情报数据", value: 600 },
        { year: "侦察图像", value: 98 },
        { year: "作战模拟", value: 20 },
      ];

      const line = new Line("leftTop", {
        data,
        xField: "year",
        yField: "value",
        // label: {},
        point: {
          size: 2,
          // style: {
          //   fill: "white",
          //   stroke: "#5B8FF9",
          //   lineWidth: 2,
          // },
        },
        tooltip: {
          showMarkers: false,
          formatter: (datum) => {
            return { name: '数量', value: datum.value};
          },
        },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: "#000",
              fill: "red",
            },
          },
        },
        interactions: [{ type: "marker-active" }],
      });

      line.render();
    },
    // 中间图表
    createCenterChart() {
      const data = [
        { type: "食品", value: 27 },
        { type: "药品", value: 25 },
        { type: "燃料", value: 18 },
        { type: "弹药", value: 15 },
        { type: "医疗器材", value: 10 },
        { type: "其他", value: 5 },
      ];

      const piePlot = new Pie("centerChart", {
        appendPadding: 10,
        data,
        angleField: "value",
        colorField: "type",
        radius: 0.75,
        label: {
          type: "spider",
          labelHeight: 28,
          content: "{name}\n{percentage}",
        },
        interactions: [
          { type: "element-selected" },
          { type: "element-active" },
        ],
      });

      piePlot.render();
    },
    // 右上图表
    createRightChart() {
      const data = [
        { year: "传感器", value: 87 },
        { year: "通信报文", value: 107 },
        { year: "地理信息", value: 41 },
        { year: "目标识别", value: 754 },
      ];

      const line = new Line("rightTop", {
        data,
        xField: "year",
        yField: "value",
        // label: {},
        point: {
          size: 2,
          style: {
            fill: "white",
            stroke: "#5B8FF9",
            lineWidth: 2,
          },
        },
        tooltip: { showMarkers: false,
          formatter: (datum) => {
            return { name: '数量', value: datum.value};
          }, },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: "#000",
              fill: "red",
            },
          },
        },
        interactions: [{ type: "marker-active" }],
      });

      line.render();
    },
    // 右中图表
    createRightCenterChart() {
      const data = [
        {
          type: "07-23",
          sales: 80,
        },
        {
          type: "07-24",
          sales: 83,
        },
        {
          type: "07-25",
          sales: 88,
        },
        {
          type: "07-26",
          sales: 96,
        },
        {
          type: "07-27",
          sales: 90,
        },
        {
          type: "07-28",
          sales: 92,
        },
        {
          type: "07-29",
          sales: 88,
        },
      ];

      const columnPlot = new Column("rightCenterChart", {
        data,
        xField: "type",
        yField: "sales",
        label: {
          // 可手动配置 label 数据标签位置
          position: "middle", // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: "#FFFFFF",
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: "日期",
          },
          sales: {
            alias: "分数",
          },
        },
      });
      columnPlot.render();
    },
  },
};
</script>

<style scoped>
/* 整体样式 */
.container {
  margin: 0 auto;
  width: 98%;
  height: 110vh;
  background-color: #f0f2f5;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/* 左侧区域样式 */
.left {
  height: 105vh;
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/* 左上区域样式 */
.leftTop {
  width: 98%;
  height: 40%;
  background-color: white;
}
/* 左上标题样式 */
.leftTopHeader,
.leftBottomTitle {
  padding: 10px;
  font-weight: bolder;
}
/* 左上数据区域样式 */
.leftShow {
  padding: 5px;
  margin: 5px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #d9d9d9;
}
.leftShow .block {
  display: inline-block;
  text-align: center;
  padding: 5px;
  font-size: 13px;
}
.leftShow .block:nth-child(n + 2) {
  border-left: 1px solid #d9d9d9;
}
.leftTopChart,
.rightTopChart,
.rightCenter {
  width: 100%;
  height: 60%;
}
/* 左上图表区域样式 */
.leftTopChart #leftTop {
  margin: 0 auto;
  width: 90%;
  height: 100%;
}
/* 左下区域样式 */
.leftBottom {
  width: 98%;
  height: 59%;
  background-color: white;
}
/* 左下数据展示样式 */
.leftBottomShow {
  margin-top: 20px;
  margin-left: 10px;
}
.leftBottomShow .showTitle {
  font-size: 15px;
  font-weight: 400;
  color: #ada9a6;
}
.leftBottomShow .tagCount {
  font-size: 17px;
  font-weight: 400;
  color: #ada9a6;
}
/* 中间区域样式 */
.center {
  height: 105vh;
  width: 48%;
  background-color: white;
}
/* 中间数据展示区域 */
.center .centerShow {
  height: 20%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  border-bottom: 2px solid #bbc5d1;
  padding: 0 20px;
}
.centerShow .centerShowBox {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.centerShowBox .centerShowTitle {
  font-size: 12px;
}
.centerShowBox .centerShowCount {
  font-size: 19px;
}
/* 中间图表区域 */
.center .centerChart {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75%;
  width: 100%;
  /* background-color: gray; */
}
/* 右侧区域样式 */
.right {
  height: 105vh;
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/* 右上 */
.rightTop {
  width: 99%;
  height: 40%;
  background-color: white;
}
/* 右中 */
.rightCenter {
  width: 99%;
  height: 40%;
  background-color: white;
}
/* 图表标题样式 */
.chartTitle {
  font-size: 14px;
  color: gray;
  margin-left: 10px;
}
/* 右下 */
.rightBottom {
  width: 99%;
  height: 19%;
  background-color: white;
}
</style>
